<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="item">
        <img src="https://img.alicdn.com/imgextra/i3/45908265/O1CN01Aew49h2AvQJ93JKpi_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"/>
    </div>
    <div class="item">
        <img src="https://img.alicdn.com/imgextra/i3/95131522/O1CN01WrKuGR1N77TGzGwBc_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"/>
    </div>
    <div class="item">
        <img src="https://img.alicdn.com/imgextra/i1/126260897/O1CN017x9i1d1IUs1SDb90L_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"/>
    </div>
    <div class="item" data-src="https://img.alicdn.com/imgextra/i2/111100312/O1CN01F6TsN81EAwISg0wKy_!!0-saturn_solar.jpg_468x468q75.jpg_.webp">
        <!-- <img src="https://img.alicdn.com/imgextra/i2/111100312/O1CN01F6TsN81EAwISg0wKy_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"/> -->
        <img src="https://img.alicdn.com/imgextra/i3/45908265/O1CN01Aew49h2AvQJ93JKpi_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"/>
    </div>
    <div class="item" data-src="https://img.alicdn.com/imgextra/i1/2260580118/O1CN01CnNTBQ1Ck5VX3rlCZ_!!0-saturn_solar.jpg_468x468q75.jpg_.webp">
        <img src="https://img.alicdn.com/imgextra/i3/45908265/O1CN01Aew49h2AvQJ93JKpi_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"/>
        <!-- <img src="https://img.alicdn.com/imgextra/i1/2260580118/O1CN01CnNTBQ1Ck5VX3rlCZ_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"/> -->
    </div>
</body>
<script>
    let  itemList = document.getElementsByClassName("item");
    let  windowHeight = document.documentElement.clientHeight;

    window.onscroll = ()=>{//滚动事件
        let  scrollTop  = document.documentElement.scrollTop;
        // console.log(scrollTop);
        for(let i=0;i<itemList.length;i++){
                let  item  = itemList[i];
                let  itemTop  = item.offsetHeight * i;

                if(scrollTop>itemTop){
                    let src  = item.getAttribute("data-src");
                    if(src){
                        item.getElementsByTagName("img")[0].src  = src;

                    }
                }


        }

    }

</script>
</html>